<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>图书管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main">
    <!--工具条-->
      <el-col :span="24" class="query-form">
        <el-form :inline="true" :model="filters">
        <el-form-item>
            <el-input v-model="filters.name" placeholder="书名称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        </el-form>
      </el-col>

      <!--列表-->
      <el-table :data="data" highlight-current-row border v-loading="loading" style="width: 100%;" element-loading-text="拼命加载中">
        <el-table-column prop="id" label="#" width="60">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="240">
        </el-table-column>
        <el-table-column prop="category" label="类别" width="120" sortable>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="140">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120" :formatter="formatPrice" sortable>
        </el-table-column>
        <el-table-column prop="summary" label="简介" min-width="160" :formatter="unescape">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="editer(scope.row)" type="text" size="small"><i class="el-icon-edit"></i> 编辑</el-button>
            <el-button @click="destory(scope.row)" type="text" size="small"><i class="el-icon-delete"></i> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="pagination">
        <div class="block pagination-wrap">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="200">
          </el-pagination>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>

<style>
.pagination{ background: #FFF;margin-top: 5px; }
.pagination-wrap{ float: right; }
.pagination-wrap .el-pagination{font-weight: normal}
</style>

<script>
// import { Edit } from './edit'
// const edit = require('./edit')

export default {
  data () {
    return {
      filters: {
        name: ''
      },
      currentPage: 1,
      loading: true,
      data: []
    }
  },
  methods: {
    formatPrice (row) {
      return '￥' + row.price
    },
    unescape (row) {
      let html = row.summary.replace(row.summary ? /&(?!#?\w+;)/g : /&/g, '&amp;').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '\'').replace(/&#39;/g, '\'')
      html = html.replace(/<br.*?\/>/gi, '\r\n  ')
      // console.log(html)
      return html
    },
    handleSearch () {
      console.log('handleSearch')
      // this.search();
    },
    editer (row) {
      console.log(row.id)
      this.$router.push({path: '/book/edit', query: {id: row.id}})
    },
    destory (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let that = this
        that.loading = true
        let t = setTimeout(() => {
          that.users = that.data.filter((item) => {
            return item.id !== row.id
          })
          that.loading = false
          clearTimeout(t)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }, 300)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      var that = this
      that.loading = true
      var t = setTimeout(() => {
        that.initData(function () {
          that.loading = false
        })
        clearTimeout(t)
      }, 200)
    },
    handleCurrentChange (val) {
      var that = this
      that.loading = true
      var t = setTimeout(() => {
        that.initData(function () {
          that.loading = false
        })
        clearTimeout(t)
      }, 300)
      console.log(`当前页: ${val}`)
    },
    initData (callback) {
      let currentPage = this.currentPage
      var arraType = ['工具类', '玄幻', '学习', '历史', '文学', '动漫', '惊悚']
      this.data = Array.from(new Array(10), (v, i) => {
        let id = (currentPage - 1) * 10 + i
        let idx = Math.abs((arraType.length - 1) - Math.floor(Math.random() * 10))
        return {id: id, name: '卡耐基经典 人性的弱点+人性的优点+语言的突破+快乐的人生', author: '佛罗基机 * 渣得', category: arraType[idx], price: Math.floor(Math.random() * 10000) / 100, summary: '编辑推荐：经典人物传记套装包含了毛泽东传、周恩来传、邓小平传、蒋介石传四本畅销传记作品。<br/>作品分别来自美国、英国、德国三大发达国家知名作者笔下，以客观的角度诠释他们的一生。<br/>经典人物传记套装是软精装典藏版，内文四色印刷，装帧、开本统一。富有收藏、礼品等价值。'}
      }
      )
      if (callback) {
        callback()
      }
    }
  },
  mounted () {
    var that = this
    var t = setTimeout(() => {
      that.loading = false
      that.initData()
      clearTimeout(t)
    }, 300)
  }
}
</script>
